import { Component } from 'react'
// antd 组件
import { Card, Form, Input, Button, Checkbox, message } from 'antd'
// 引入图片
import imgSrc from 'assets/logo.png'
// 引入样式
import styles from "./index.module.scss"
import { loginApi } from 'api/user'
import { setToken } from 'utils/storage'
export default class Login extends Component {

  handleSubmit = async (valuse) => {
    try {
      const res = await loginApi(valuse)
      setToken(res.data.token)
      this.props.history.push("/")
      message.success("登录成功")
    } catch (error) {
      message.warning(error.response.data.message)
    }
  }
  render() {
    return <div className={styles.login}>
      <Card className="login-container">
        <img src={imgSrc} alt="" className="login-logo" />
        <Form autoComplete="off" onFinish={this.handleSubmit} initialValues={{ mobile: "13811111111", code: "246810", deal: true }}>
          <Form.Item name="mobile" rules={[
            {
              required: true,
              message: "手机号不能为空"
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: "请输入11位手机号"
            }
          ]}>
            <Input placeholder="请输入手机号" />
          </Form.Item>

          <Form.Item name="code" rules={[
            {
              required: true,
              message: "验证码不能为空"
            },
            {
              pattern: /^\d{6}$/,
              message: "请输入6位验证码"
            }
          ]}>
            <Input placeholder="请输入验证码" />
          </Form.Item>

          <Form.Item name="deal" valuePropName="checked" rules={[
            { validator: (_, value) => value ? Promise.resolve() : Promise.reject('请勾选阅读协议') }
          ]}>
            <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
          </Form.Item>

          <Form.Item >
            <Button block type="primary" htmlType="submit">登录</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  }
}
